<template>
  <div style="padding: 30px 15px 30px 15px;">
    <el-row>
      发布评论
    </el-row>
    <el-row>
      <el-input style="width: 240px; margin-top: 5px" placeholder="昵称" v-model="nickName"></el-input>
    </el-row>
    <el-row>
      <el-input style="width: 360px; margin-top: 5px" type="textarea" :rows="6" placeholder="评论内容" v-model="msg"></el-input>
    </el-row>
    <el-row style="margin-top: 10px; margin-left: 290px;">
      <el-button @click="add">发布</el-button>
    </el-row>
  </div>
</template>

<script>
    export default {
      props: {
        addMsg: {              //指定属性名
          type: Function,      //指定属性类型
          required: true       //指定属性必要性
        }
      },
      data () {
        return {
          nickName: '',
          msg: ''
        }
      },
      methods: {
        add () {
          const nickName = this.nickName.trim();
          const msg = this.msg.trim();
          if(!nickName || !msg){
            alert('昵称或评论内容不能为空！');
            return;
          }
          const comment = {nickName, msg}
          this.addMsg(comment);

          this.nickName = '';
          this.msg = '';
        }
      }
    }
</script>

<style>

</style>
